<template>
	<view>
		<view style="padding-left: 43upx;padding-top: 22upx; text-align: center; background-color:#11CC99;height: 300upx;">
			<span style="font-size: 42upx;font-weight: 600;">{{title}}</span>
		</view>
		<view class="vmodul" style="margin-top: -180upx;">
			<view>
				<view class="cu-form-group" style="font-size: 46upx;font-weight: 550;">
					<span>任务单类型：</span>
					
					<text v-if="data.taskType==='xunjian'">巡检</text>
					<text v-if="data.taskType==='bidui'">比对</text>
					<text v-if="data.taskType==='weixiu'">维修</text>
					<text v-if="data.taskType==='qita'">其它</text>
				</view>
				<view class="cu-form-group">
					<view>实施人:</view>
					<text>{{data.shishirenName}}</text>
				</view>
				<view class="cu-form-group">
					<view>开始时间:</view>
					<text>{{data.createTime}}</text>
				</view>
				<view class="cu-form-group">
					<view>站点名称:</view>
					<text>{{data.siteName}}</text>
				</view>
				<view class="cu-form-group">
					<view style="white-space:nowrap;">详情:</view>
					<text>{{data.yunweiContent}}</text>
				</view>
				<view class="cu-form-group">
					<view>备注:</view>
					<text>{{data.yunweiBeizhu}}</text>
				</view>
				<view class="cu-form-group">
					<view>相关内容:</view>
					<text>{{data.siteName}}</text>
				</view>
				<view class="cu-form-group">
					<view class="flex-item-20">图片</view>
					<view class="flex-item-80">
						<image :src="data.tempPicture" @tap="_previewImage(data.tempPicture)" class="img"  mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="vmodul">
			<view class="cu-form-group" :class="showMessage1==false?'after-cuIcon-unfold':'after-cuIcon-fold'" id="pdh" @click="hiddenMessage($event)">
				<text class="person-msg-hidden">移交信息</text>
			</view>
			<view v-if="showMessage1" style="padding-left: 31upx;">
				<view class="cu-form-group" style="padding-left: 0px;">
					<view class="cuIcon-order" >移交人:</view>
					<text>{{data.transferMessage.tranferMan}}</text>
				</view>
				<view class="cu-form-group" style="margin-left: 20upx;">
					<view>转交人:</view>
					<text>{{data.transferMessage.transmitMan}}</text>
				</view>
				<view class="cu-form-group" style="margin-left: 20upx;">
					<view style="white-space:nowrap;">移交内容:</view>
					<text>{{data.transferMessage.transferContent}}</text>
				</view>
			</view>
		</view>
		<view class="vmodul">
			<view class="cu-form-group" :class="showMessage2==false?'after-cuIcon-unfold':'after-cuIcon-fold'" @click="hiddenMessage2" style="padding-left: 31upx;">
				<text class="person-msg-hidden">里程花费记录</text>
			</view>
			<view v-if="showMessage2" style="padding-left: 31upx;">
				<view class="cu-form-group" style="padding-left: 0px;" @click="hiddenMessage3" >
						<view class="cuIcon-moneybagfill">花费:</view>
						<view><text :class="showMessage3==true?'after-cuIcon-fold':'after-cuIcon-unfold'">{{data.mileageSpendRecord.spend}}</text></view>
				</view>
				<view v-if="showMessage3" >
					<view class="cu-form-group row" >
						<view>地铁:</view>
						<text>{{data.mileageSpendRecord.metroSpend}}</text>
					</view>
					<view class="cu-form-group row">
						<view>出租车:</view>
						<text>{{data.mileageSpendRecord.taxiSpend}}</text>
					</view>
				</view>
				
				<view class="cu-form-group "  style="padding-left: 0px;" @click="hiddenMessage4">
					<view class="cuIcon-timefill">里程:</view>
					<view><text :class="showMessage4==true?'after-cuIcon-fold':'after-cuIcon-unfold'">{{data.mileageSpendRecord.mileage}}</text></view>
				</view>
				<view v-if="showMessage4">
					<view class="cu-form-group row">
						<view>步行:</view>
						<text>{{data.mileageSpendRecord.walk}}</text>
					</view>
					<view class="cu-form-group row">
						<view>出租车:</view>
						<text>{{data.mileageSpendRecord.taxi}}</text>
					</view>
				</view>
			</view>
		</view> -->
		
		<view  v-for="(item,key) in historyOpInfo" :key = "key" >
			<view class="vmodul">
					<view class="cu-form-group" style="font-size: 38upx;font-weight: 500;">
						<text class="">运维记录单</text>
					</view>
					<view>
						<view class="cu-form-group">
							<view class="reason">提交人</view>
							<text>{{item.tijiaorenName}}</text>
						</view>
						<view class="cu-form-group">
							<view class="reason">提交内容</view>
							<text>{{item.reason}}</text>
						</view>
						<!-- <view class="cu-form-group">
							<view class="reason">原因</view>
							<input class="" v-model="taskMan" type="text" placeholder="请输入" />
						</view>
						<view class="cu-form-group">
							<view class="reason">原因</view>
							<input class="" v-model="taskMan" type="text" placeholder="请输入" />
						</view>
						<view class="cu-form-group">
							<view class="reason">原因</view>
							<input class="" v-model="taskMan" type="text" placeholder="请输入" />
						</view>
						<view class="cu-form-group">
							<view class="reason">原因</view>
							<input class="" v-model="taskMan" type="text" placeholder="请输入" />
						</view> -->
						<hm-photo-card :options="item.pictureArr"></hm-photo-card>
						
						<!-- <view class="reason">
							<view>图片凭证</view>
							<view>
								<!-- <hm-photo-card></hm-photo-card> -->
							<!-- </view> -->
							
						<!-- </view> -->
					</view>
			</view>
		</view>
		
		<view class="vmodul" v-if="taskType === 'xunjian'">
				<view class="cu-form-group" style="font-size: 38upx;font-weight: 500;">
					<text class="">此次运维填报</text>
				</view>
				<view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<textarea class="" v-model="reason" type="text" placeholder="请输入" />
					</view>
					<!-- <view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view> -->
					<view class="reason">
						<view>图片凭证</view>
						<view>
							<sunui-upimg @change="getImageInfo" :url="pictureUrl" :upload_auto="false" ref="xunjian"  :upload_count="6"></sunui-upimg>
						</view>
						
					</view>
				</view>
		</view>
		<view class="vmodul" v-if="taskType === 'bidui'">
				<view class="cu-form-group" style="font-size: 38upx;font-weight: 500;">
					<text class="">此次运维填报</text>
				</view>
				<view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<textarea class="" v-model="reason" type="text" placeholder="请输入" />
					</view>
					<!-- <view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view> -->
					<view class="reason">
						<view>图片凭证</view>
						<view>
							<sunui-upimg @change="getImageInfo" :url="pictureUrl" :upload_auto="false" ref="bidui"  :upload_count="6"></sunui-upimg>
						</view>
						
					</view>
				</view>
		</view>
		<view class="vmodul" v-if="taskType === 'qita'">
				<view class="cu-form-group" style="font-size: 38upx;font-weight: 500;">
					<text class="">此次运维填报</text>
				</view>
				<view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<textarea class="" v-model="reason" type="text" placeholder="请输入" />
					</view>
					<!-- <view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view> -->
					<view class="reason">
						<view>图片凭证</view>
						<view>
							<sunui-upimg @change="getImageInfo" :url="pictureUrl" :upload_auto="false" ref="qita"  :upload_count="6"></sunui-upimg>
						</view>
						
					</view>
				</view>
		</view>
		<view class="vmodul" v-if="taskType === 'weixiu'">
				<view class="cu-form-group" style="font-size: 38upx;font-weight: 500;">
					<text class="">此次运维填报</text>
				</view>
				<view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<textarea class="" v-model="reason" type="text" placeholder="请输入" />
					</view>
					<!-- <view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="reason">原因</view>
						<input class="" v-model="taskMan" type="text" placeholder="请输入" />
					</view> -->
					<view class="reason">
						<view>图片凭证</view>
						<view>
							<sunui-upimg @change="getImageInfo" :url="pictureUrl" :upload_auto="false" ref="weixiu"  :upload_count="6"></sunui-upimg>
						</view>
						
					</view>
				</view>
		</view>
		<view>
			<view style="padding-top: 43upx;padding-bottom: 43upx;">
				<button @click="sureSubmit" style="background-color:#11CC99;height: 80upx;width: 80%;"><span>提交申请</span></button>
			</view>
		</view>
	</view>
</template>

<script>
	import sunUiUpimg from '@/components/sunui-upimg/sunui-upimg.vue';
	import hmPhotoCard from '@/components/hm-photo-card/index.vue';
	import Util from '@/utils/util.js';
	let self
	export default{
		data(){
			return{
				title:'运维记录填报',
				taskType:'',
				pictureUrl:'',
				reason:'',
				data:{},
				// showMessage1:false,
				// showMessage2:false,
				// showMessage3:true,
				// showMessage4:true,
				serviceArr4: [],
				historyOpInfo:[],
				xunjianInfo:{
					reason:'',
				},
				biduiInfo:{
					reason:'',
				},
				qitaInfo:{
					reason:'',
				},
				weixiuInfo:{
					reason:'',
				},
			}
		},
		components: {
			'sunui-upimg': sunUiUpimg,
			hmPhotoCard
		},
		onLoad(e) {
			self = this
			//依据任务单类型渲染界面（目前表一样，考虑后期不同类型表单会不一样）
			if(e.type){
				self.taskType = e.type
			}
			
			//根据任务单id查询相关信息
			if(e.id){
				Util.request('/monitor/taskInfo/get', {id:e.id}, 'GET').then(res=>{
					self.data=res.data; //任务单数据
					if(self.data.opStatus ==='operating'&&self.data.oaStatus ==='back'){
						//加载历史处理单
						if(self.taskType === 'xunjian'){
							//查询运维单
							Util.request('/monitor/taskXunjian/getByTaskId', {taskId:e.id}, 'GET').then(res=>{
								
								res.data.map(item => {
									if(item.pictureArr){
									item.pictureArr.map(picture =>{
										if(picture.filePath){
											let pictureTemp = picture.filePath.split('upload')
											pictureTemp = pictureTemp[1].split('\\')
											picture.tempPicture = "http://www.szsjml.top:8148/image/"+pictureTemp[1]+"/"+pictureTemp[2];
										}
									})
									}
								});
								self.historyOpInfo=res.data; //任务单数据
							}).catch(()=>{
								//联网失败, 结束加载
							})
						}else if(self.taskType === 'bidui'){
							//查询运维单
							Util.request('/monitor/taskBidui/getByTaskId', {taskId:e.id}, 'GET').then(res=>{
								res.data.map(item => {
									if(item.pictureArr){
									item.pictureArr.map(picture =>{
										if(picture.filePath){
											let pictureTemp = picture.filePath.split('upload')
											pictureTemp = pictureTemp[1].split('\\')
											picture.tempPicture = "http://www.szsjml.top:8148/image/"+pictureTemp[1]+"/"+pictureTemp[2];
										}
									})
									}
								})
								self.historyOpInfo=res.data; //任务单数据
							}).catch(()=>{
								//联网失败, 结束加载
							})
						}else if(self.taskType === 'weixiu'){
							//查询运维单
							Util.request('/monitor/taskGuzhang/getByTaskId', {taskId:e.id}, 'GET').then(res=>{
								res.data.map(item => {
									if(item.pictureArr){
									item.pictureArr.map(picture =>{
										if(picture.filePath){
											let pictureTemp = picture.filePath.split('upload')
											pictureTemp = pictureTemp[1].split('\\')
											picture.tempPicture = "http://www.szsjml.top:8148/image/"+pictureTemp[1]+"/"+pictureTemp[2];
										}
									})
									}
								})
								self.historyOpInfo=res.data; //任务单数据
							}).catch(()=>{
								//联网失败, 结束加载
							})
						}else if(self.taskType === 'qita'){
							//查询运维单
							Util.request('/monitor/taskQita/getByTaskId', {taskId:e.id}, 'GET').then(res=>{
								res.data.map(item => {
									if(item.pictureArr){
									item.pictureArr.map(picture =>{
										if(picture.filePath){
											let pictureTemp = picture.filePath.split('upload')
											pictureTemp = pictureTemp[1].split('\\')
											picture.tempPicture = "http://www.szsjml.top:8148/image/"+pictureTemp[1]+"/"+pictureTemp[2];
										}
									})
									}
								})
								self.historyOpInfo=res.data; //任务单数据
							}).catch(()=>{
								//联网失败, 结束加载
							})
						}
					}
				}).catch(()=>{
					//联网失败, 结束加载
				})

			}
		},
		mounted() {
					// this.$refs.upimg.upload_before_list = this.serviceArr4;
		},
		methods:{
			_previewImage(image) {
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			// hiddenMessage:function(e){
			// 	this.showMessage1=!this.showMessage1;
			// },
			// hiddenMessage2:function(e){
			// 	this.showMessage2=!this.showMessage2;
			// },
			// hiddenMessage3:function(e){
			// 	this.showMessage3=!this.showMessage3;
			// },
			// hiddenMessage4:function(e){
			// 	this.showMessage4=!this.showMessage4;
			// },
			sureSubmit:function(){
				//更改运维单为运维完成
				self.data.opStatus = 'complete'
				self.data.oaStatus = 'ing'
				//  添加审核人
				Util.request('/monitor/groupUser/app/zuzhang', {userId:self.data.shishirenId}, 'GET').then((res) => {
					self.data.shenherenId = res.data.userId
					self.data.shenherenName = res.data.nickName
					//更新任务状态为运维完成
					Util.request('/monitor/taskInfo/update', self.data, 'POST').then((res) => {
						uni.showModal({
							title: '提示',
							content: '提交成功，运维完成',
							showCancel: false,
							confirmText: '确定',
							success: res => {
								if (res.confirm) {
									uni.navigateBack({
										delta:1
									})
								}
							}
						})
						
					})
				})
				
				if(self.taskType === 'xunjian'){
					//先添加运维记录，获取记录单id
					let xunjianId = ''
					self.xunjianInfo.tijiaorenName = self.data.shishirenName
					self.xunjianInfo.tijiaorenId = self.data.shishirenId
					self.xunjianInfo.taskId = self.data.guid
					self.xunjianInfo.reason = self.reason
					Util.request('/monitor/taskXunjian/add', self.xunjianInfo, 'POST').then(res=>{
						xunjianId=res.data; //巡检单id
					
						//上传文件需要添加记录单id
						self.pictureUrl = 'http://120.24.62.145:8153/monitor/xunjianFile/uploadFile?xunjianId='+xunjianId
						self.$refs.xunjian.changeUrl(self.pictureUrl)
						self.$refs.xunjian.upload(true)
					}).catch(()=>{
						//联网失败, 结束加载
					})
				}else if(self.taskType === 'bidui'){
					//先添加运维记录，获取记录单id
					let biduiId = ''
					self.biduiInfo.tijiaorenName =self.data.shishirenName
					self.biduiInfo.tijiaorenId = self.data.shishirenId
					self.biduiInfo.taskId = self.data.guid
					self.biduiInfo.reason = self.reason
					Util.request('/monitor/taskBidui/add', self.biduiInfo, 'POST').then(res=>{
						biduiId=res.data; //比对单id
						
						//上传文件需要添加记录单id
						self.pictureUrl = 'http://120.24.62.145:8153/monitor/biduiFile/uploadFile?biduiId='+ biduiId
						self.$refs.bidui.changeUrl(self.pictureUrl)
						self.$refs.bidui.upload(true)
					}).catch(()=>{
						//联网失败, 结束加载
					})
					
				}else if(self.taskType === 'weixiu'){
					//先添加运维记录，获取记录单id
					let weixiuId = ''
					self.weixiuInfo.tijiaorenName =self.data.shishirenName
					self.weixiuInfo.tijiaorenId = self.data.shishirenId
					self.weixiuInfo.taskId = self.data.guid
					self.weixiuInfo.reason = self.reason
					Util.request('/monitor/taskGuzhang/add', self.weixiuInfo, 'POST').then(res=>{
						weixiuId=res.data; //维修单id
						
						//上传文件需要添加记录单id
						self.pictureUrl = 'http://120.24.62.145:8153/monitor/guzhangFile/uploadFile?guzhangId='+weixiuId
						self.$refs.weixiu.changeUrl(self.pictureUrl)
						self.$refs.weixiu.upload(true)
					}).catch(()=>{
						//联网失败, 结束加载
					})
					
				}else if(self.taskType === 'qita'){
					//先添加运维记录，获取记录单id
					let qitaId = ''
					self.qitaInfo.tijiaorenName =self.data.shishirenName
					self.qitaInfo.tijiaorenId = self.data.shishirenId
					self.qitaInfo.taskId = self.data.guid
					self.qitaInfo.reason = self.reason
					Util.request('/monitor/taskQita/add', self.qitaInfo, 'POST').then(res=>{
						qitaId=res.data; //其它单id
						//上传文件需要添加记录单id
						self.pictureUrl = 'http://120.24.62.145:8153/monitor/qitaFile/uploadFile?qitaId='+qitaId
						self.$refs.qita.changeUrl(self.pictureUrl)
						self.$refs.qita.upload(true)
					}).catch(()=>{
						//联网失败, 结束加载
					})
					
					
				}
				
			},
			getImageInfo(e) {
				if(e.length>0){
					
				}
			},
		}
	}
</script>

<style>
	.vmodul{
		display: flex;
		flex-direction:column;
		margin-left: 22upx;
		margin-right: 22upx;
		margin-top: 22upx;
		background-color: #FCFCFC;
		padding: 10upx 10upx 10upx 10upx;
		border-radius:22upx
	}
	.reason{
		padding: .4rem .5rem;
	}
	.cuIcon-order::before{
		color: white;
		border-radius: 50%;
		background-color: #53C8E7;
		margin-right: 20upx;
	}
	.cuIcon-moneybagfill::before{
		color: #F2D67A;
		margin-right: 20upx;
	}
	.cuIcon-timefill::before{
		color: #8BB2F3;
		margin-right: 20upx;
	}
	.after-cuIcon-fold::after {
		content: "\e6de";
		color:#008800;
		font-weight: 200;
		font-size: 40upx;
	}
	.after-cuIcon-unfold::after {
		content: "\e661";
		color:#008800;
		font-weight: 200;
		font-size: 40upx;
	}
	.row{
		margin-left: 20upx;
		margin-right: 34upx;
		font-family: "cuIcon";
	}
	.img {
	  border-radius: 29.22rpx;
	  width: 200.65rpx;
	  height: 200.65rpx;
	  overflow: hidden;
	}
</style>
